<!--
 * @Date: 2022-06-14 10:28:24
 * @Author: 陶子
 * @LastEditTime: 2022-06-24 13:33:41
 * @FilePath: \jk_one-stop_cloud_mobile_v1.0\src\views\workManagement\productionReport\pieceRateStatistics.vue
 * @pageName: 这是--(计件工资统计报表)--页面
-->
<template>
  <div class="box-content">
    <Navbar :appTitle="appTitle" />
    <div class="capitalflow-top">
      <div class="capitalflow-topl" @click="openDate">
        <span v-if="startDate&&endDate">{{moment(startDate).format('YYYY-MM-DD')}}~{{moment(endDate).format("YYYY-MM-DD")}}</span>
      </div>
      <div class="capitalflow-topr" @click="onScreen">筛选({{ topSearchNum }})</div>
    </div>
    <search-tag ref="SearchTag" :propsForSon="propsForSon" @getCategory="getCategory"></search-tag>
    <!-- 头部模块 -->
    <div class="infoBox">
      <div class="infoTop">
        <div class="innerBox">
          <div class="topText">工资合计（元）</div>
          <div class="topNumber">{{ baseInfo.totalNumber }}</div>
        </div>
      </div>
      <div class="infoBot">
        <div class="botLeft">
          <img src="~@/assets/img/itemBgc.png" alt="" class="left_img">
          <div class="leftBox">
            <div class="leftBox_top">不合格品工资（元）</div>
            <div class="leftBox_bot">{{ baseInfo.notNumber }}</div>
          </div>
        </div>
        <div class="botRight">
          <img src="~@/assets/img/itemBgc.png" alt="" class="right_img">
          <div class="rightBox">
            <div class="rightBox_top">合格品工资（元）</div>
            <div class="rightBox_bot">{{ baseInfo.yesNumber }}</div>
          </div>
        </div>
      </div>
    </div>
    <!--分页列表 -->
    <div class="listBox" :style="{height: GLOBAL.currentEnvironment? 'calc(100vh - 2.75rem)' : 'calc(100vh - 3.25rem)',}">
      <pageList ref="pageList" :columns="columns" :listUrl="listUrl">
        <div class="rt-column" slot="body" slot-scope="{ item }">
          <div class="rt-row">
            <div class="column">
              <span class="column-t">合格品工资：</span>
              <span class="column-c">{{item.qualifiedWagesText}}元</span>
            </div>
          </div>
          <div class="rt-row">
            <div class="column">
              <span class="column-t">不合格品工资：</span>
              <span class="column-c">{{item.noQualifiedWagesText}}元</span>
            </div>
          </div>
          <div class="rt-row">
            <div class="column">
              <span class="column-t">工资合计：</span>
              <span class="column-c">{{item.totalWagesText}}元</span>
            </div>
          </div>
        </div>
        <div slot="foot" slot-scope="{item}" class="operateBox">
          <div class="pubBtn" @click.stop="lookDetail(item)">查看明细</div>
        </div>
      </pageList>
    </div>
    <!--时间-->
    <van-popup :close-on-click-overlay='false' v-model="dateshow" position="bottom" :style="{ height: '40%' }">
      <div v-if="startShow">
        <van-datetime-picker v-model="pickStart" type="date" title="开始时间" :max-date="maxDate" :formatter="formatter" @confirm="StartConfim" @cancel="StartCancel" />
      </div>
      <div v-else>
        <van-datetime-picker v-model="pickEnd" type="date" title="结束时间" :min-date='minData' :max-date="maxDate" :formatter="formatter" cancel-button-text=" "
          @confirm="EndConfim" />
      </div>
    </van-popup>
  </div>
</template>

<script>
import Search from "@/components/search";
import SearchTag from "./SearchTag";
import Navbar from "@/components/navBar/navBar_right";
import TabBar from "@/components/TabBar";
import pageList from "@/components/pageList";
import moment from "moment";
import { numberTofixed } from "@/utils/util";
import { getPieceRateStatisticsAmount } from "@/api/mobile";
export default {
  components: {
    Navbar,
    TabBar,
    pageList,
    Search,
    SearchTag,
  },
  data() {
    return {
      numberTofixed,
      startDate: null,
      endDate: null,
      pickStart: null,
      pickEnd: null,
      dateshow: false,
      startShow: true,
      moment,
      minData: null,
      maxDate: new Date(),
      propsForSon: {},
      appTitle: "计件工资统计",
      listUrl: "/mess/messProductReport/getPieceRateStatistics", //列表接口
      columns: {
        titleKey: "operator", //标题
      },
      baseInfo: {
        totalNumber: 0,
        notNumber: 0,
        yesNumber: 0,
      },

      filterForm: {
        operator: "",
        reportWorkTime: [],
        spec: "",
      },
    };
  },
  computed: {
    topSearchNum() {
      let filterNum = 0;
      for (let key in this.filterForm) {
        if (key == "reportWorkTime") {
          if (this.filterForm[key].length > 0) {
            filterNum += 1;
          }
        } else {
          if (this.filterForm[key]) {
            filterNum += 1;
          }
        }
      }
      return filterNum;
    },
  },
  beforeRouteLeave(to, from, next) {
    if (this.$refs.SearchTag.showSearchTag) {
      this.appTitle = "计件工资统计";
      this.$refs.SearchTag.showSearchTag = false;
      next(false);
    } else {
      next();
    }
  },
  created() {
    let myDate = new Date();
    let year = myDate.getFullYear();
    let month = myDate.getMonth();
    this.startDate = new Date(year, month, 1);
    this.endDate = myDate;
    this.pickStart = this.startDate;
    this.pickEnd = this.endDate;
    this.filterForm.reportWorkTime = [this.startDate, this.endDate];
  },
  mounted() {
    let searchObj = this.formatData();
    this.searchQuery(searchObj);
  },
  methods: {
    lookDetail(item) {
      this.$router.push({
        path: "/workManagement/piecePayDetails",
        query: {
          operator: item.operator,
          from: "/pieceRateStatistics",
          navTitle: "计件工资明细",
        },
      });
    },
    StartConfim(v) {
      this.startDate = this.pickStart;
      this.minData = this.pickStart;
      this.startShow = false;
    },
    EndConfim() {
      this.endDate = this.pickEnd;
      this.startShow = true;
      this.dateshow = false;
      this.filterForm.reportWorkTime = [this.pickStart, this.pickEnd];
      let searchObj = this.formatData();
      this.searchQuery(searchObj);
    },
    StartCancel() {
      this.dateshow = false;
    },

    openDate() {
      this.pickStart = this.startDate;
      this.pickEnd = this.endDate;
      this.dateshow = true;
    },
    onScreen() {
      let pramsObj = {
        ...this.filterForm,
      };
      this.title = "更多筛选";
      this.$refs.SearchTag.showModal(pramsObj);
    },
    getCategory(p) {
      this.filterForm = JSON.parse(JSON.stringify(p));

      console.log("this.filterForm+++++++++++++", this.filterForm);
      this.title = "计件工资统计";
      let searchObj = this.formatData();
      if (
        this.filterForm.reportWorkTime &&
        this.filterForm.reportWorkTime.length > 0
      ) {
        this.startDate = new Date(this.filterForm.reportWorkTime[0]);
        this.endDate = new Date(this.filterForm.reportWorkTime[1]);
      } else {
        this.startDate = "";
        this.endDate = "";
      }
      this.searchQuery(searchObj);
    },
    // 搜索
    searchQuery(searchObj) {
      let params = {
        ...searchObj,
      };
      this.getBaseInfo(params);
      this.$refs.pageList.searchQuery(params);
    },
    getBaseInfo(params) {
      getPieceRateStatisticsAmount(params).then((res) => {
        if (res.success) {
          this.baseInfo.totalNumber = res.result.totalWagesText || "0";
          this.baseInfo.yesNumber = res.result.qualifiedWagesText || "0";
          this.baseInfo.notNumber = res.result.noQualifiedWagesText || "0";
        } else {
          this.$antdMessage.warning(res.message);
        }
      });
    },
    // 筛选传参数据
    formatData() {
      let copyForm = JSON.parse(JSON.stringify(this.filterForm));
      let params = {};
      params.operator = copyForm.operator;
      params.spec = copyForm.spec;
      if (copyForm.reportWorkTime && copyForm.reportWorkTime.length > 0) {
        params.reportWorkTimeBegin =
          moment(copyForm.reportWorkTime[0]).format("YYYY-MM-DD") +
          " " +
          "00:00:00";
        params.reportWorkTimeEnd =
          moment(copyForm.reportWorkTime[1]).format("YYYY-MM-DD") +
          " " +
          "23:59:59";
      } else {
        params.reportWorkTimeBegin = "";
        params.reportWorkTimeEnd = "";
      }
      return params;
    },
    formatter(type, val) {
      if (type === "year") {
        return val + "年";
      }
      if (type === "month") {
        return val + "月";
      }
      if (type === "day") {
        return val + "日";
      }
      if (type === "hour") {
        return val + "时";
      }
      if (type === "minute") {
        return val + "分";
      }
      return val;
    },
  },
};
</script>
<style lang="less" scoped>
.flex(@jc,@ai,@fd:row) {
  display: flex;
  justify-content: @jc;
  align-items: @ai;
  flex-direction: @fd;
}
.capitalflow-top {
  .flex(space-between,center);
  height: 0.5rem;
  background: #fff;
  box-sizing: border-box;
  padding: 0 0.24rem;
  .capitalflow-topl {
    flex: 2;
    text-align: center;
    .flex( flex-start,center);
    span {
      display: block;
      position: relative;
      font-size: 15px;
    }
    span::after {
      position: absolute;
      top: 50%;
      right: -0.15rem;
      margin-top: -5px;
      border: 3px solid;
      border-color: transparent transparent #dcdee0 #dcdee0;
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg);
      opacity: 0.8;
      content: "";
    }
  }
  .capitalflow-topr {
    font-size: 0.15rem;
    font-weight: 500;
    color: #191f25;
    flex: 1;
    .flex( flex-end,center);
  }
}
.box-content {
  height: 100vh;
  overflow-y: hidden;
  .serach {
    height: 0.33rem;
    background: #f2f2f6;
    border-radius: 0rem;
    margin-bottom: 0.16rem;
    .flex(space-between,center);
    line-height: 0.33rem;
    padding: 0.1rem 0.12rem;
    .placeh {
      font-size: 0.16rem;
      font-family: PingFang SC;
      font-weight: 400;
      color: #888888;
      line-height: 0.23rem;
    }
  }
}

.rt-column {
  padding: 0.17rem 0 0 0.17rem;
}
.rt-row {
  margin-bottom: 0.1rem;
  .column {
    width: 100%;
    .column-t {
      font-size: 0.14rem;
      font-family: PingFang SC;
      font-weight: 400;
      color: #888888;
      margin-bottom: 0.03rem;
    }
    .column-c {
      font-size: 0.14rem;
      font-family: PingFang SC;
      font-weight: 400;
      color: #191f25;
    }
  }
}
.listBox {
  height: calc(100vh - 1.5rem);
  overflow-y: auto;
  .title {
    width: 3.1rem;
    margin-right: 0.1rem;
    font-size: 0.16rem;
    font-family: PingFang SC;
    font-weight: 500;
    color: #191f25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .label {
    margin-left: -0.03rem;
    margin-top: -0.1rem;
    span {
      height: 0.16rem;
      background: #f0f6fe;
      color: #1890ff;
      margin-right: 0.1rem;
      padding: 0.03rem 0.08rem;
      font-size: 0.11rem;
      border-radius: 0.03rem;
    }
  }
}

/deep/ .list .wrap:first-child {
  margin-top: 0 !important;
}
div.infoBox {
  background-color: #fff;
  box-sizing: border-box;
  padding: 0.16rem 0.33rem;
  margin: 0.1rem 0;
  div.infoTop {
    .flex(center,center);
    .innerBox {
      width: 2rem;
      height: 1.2rem;
      background: url("~@/assets/img/process.png") no-repeat center/cover;
      box-sizing: border-box;
      padding-bottom: 0.2rem;
      .flex(flex-end,center,column);
      div.topText {
        font-size: 0.14rem;
        color: #888888;
      }

      div.topNumber {
        font-size: 0.18rem;
        font-weight: bold;
        color: #191f25;
        margin-top: 0.1rem;
      }
    }
  }

  div.infoBot {
    .flex(space-between,center,);
    margin-top: 0.15rem;
    div.botLeft {
      .flex(flex-start,flex-start);
      img.left_img {
        width: 0.14rem;
        height: 0.14rem;
        margin-right: 0.06rem;
        position: relative;
        top: 0.03rem;
      }

      div.leftBox {
        div.leftBox_top {
          font-size: 0.14rem;
          color: #888888;
        }

        div.leftBox_bot {
          font-size: 0.18rem;
          font-weight: 500;
          color: #ff943e;
        }
      }
    }

    div.botRight {
      .flex(flex-start,flex-start);
      .right_img {
        width: 0.14rem;
        height: 0.14rem;
        margin-right: 0.06rem;
        position: relative;
        top: 0.03rem;
      }
      .rightBox {
        div.rightBox_top {
          font-size: 0.14rem;
          color: #888888;
        }

        div.rightBox_bot {
          font-size: 0.18rem;
          font-weight: 500;
          color: #00b042;
        }
      }
    }
  }
}
.operateBox {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  box-sizing: border-box;
  padding-right: 0.07rem;
  font-size: 0.14rem;
  font-weight: 500;
  color: #1890ff;
}
.pubBtn {
  margin-right: 0.12rem;
  &:nth-last-child(1) {
    margin-right: 0;
  }
}
</style>
